import { NColorPicker } from "naive-ui";
import type { ColorPickerProps } from "naive-ui";
import type { HTMLAttributes } from "vue";
import type { BaseComponentType } from "../types";
import { getSlotsDom } from "../utils";
export type ColorPickerFactoryConstructorType = {
  props?: ColorPickerProps;
  attrs?: HTMLAttributes;
  actionSlot?: BaseComponentType;
  labelSlot?: (color: string | null) => BaseComponentType;
};
export class ColorPickerFactory {
  private attrs: HTMLAttributes = {};
  private props: ColorPickerProps = {};
  private actionSlot: BaseComponentType = null;
  private labelSlot: (color: string | null) => BaseComponentType = () => null;

  constructor(data?: ColorPickerFactoryConstructorType) {
    if (data?.props) this.setProps(data.props);
    if (data?.attrs) this.setAttrs(data.attrs);
    if (data?.actionSlot) this.setAction(data.actionSlot);
    if (data?.labelSlot) this.setLabel(data.labelSlot);
  }
  setAttrs(attrs: HTMLAttributes) {
    this.attrs = attrs;
    return this;
  }
  setProps(props: ColorPickerProps) {
    this.props = props;
    return this;
  }
  setAction(component: BaseComponentType) {
    this.actionSlot = component;
    return this;
  }
  setLabel(component: (color: string | null) => BaseComponentType) {
    this.labelSlot = component;
    return this;
  }
  create() {
    return (
      <NColorPicker {...this.attrs} {...this.props}>
        {{
          action: () => getSlotsDom(this.actionSlot),
          label: (color: string | null) => getSlotsDom(this.labelSlot(color)),
        }}
      </NColorPicker>
    );
  }
}
